알아야 할 두 가지 중요한 사항이 있습니다. 페인팅 순서와 스택 컨텍스트입니다. 사양을 참조하면 요소를 그리는 방법과시기를 알 수 있습니다.
Z- 인덱스 순서 (가장 음수 먼저)에서 음수 z- 인덱스 (0 제외)를 사용하여 배치 된 하위 항목으로 구성된 컨텍스트를 쌓은 다음 트리 순서
다음 범주에 속하는 트리 순서의 모든 위치, 불투명도 또는 변형 하위 항목 :
트리 순서로 'z-index : auto'또는 'z-index : 0'을 사용하여 위치가 지정된 모든 하위 항목입니다.
z- 인덱스 순서 (가장 작은 것 먼저)에서 1보다 크거나 같은 z- 인덱스를 사용하여 배치 된 하위 항목으로 형성된 컨텍스트를 쌓은 다음 트리 순서
이것으로부터 우리는 먼저 단계 (3)에서 음의 Z- 인덱스로 요소를 페인트 한 다음 단계 (8)에서 Z- 인덱스가 0 인 요소, 마지막으로 단계 (9)에서 Z- 인덱스가 양수인 요소를 페인트합니다. , 이것은 논리적입니다. 사양의 다른 부분에서도 읽을 수 있습니다.
각 상자는 하나의 스택 컨텍스트에 속합니다. 주어진 스택 컨텍스트의 각 상자에는 동일한 스택 컨텍스트의 다른 상자에 상대적인 z 축에서의 위치 인 정수 스택 레벨이 있습니다. 스택 레벨이 더 높은 상자는 항상 스택 레벨이 낮은 상자 앞에 포맷됩니다. 상자는 음수 스택 레벨을 가질 수 있습니다. 스택 컨텍스트에서 스택 레벨이 동일한 상자는 문서 트리 순서에 따라 아래에서 위로 스택됩니다.
또한
로컬 스택 컨텍스트를 설정하는 요소는 두 개의 스택 레벨이있는 ​​상자를 생성합니다. 하나는 생성하는 스택 컨텍스트 용 (항상 0)이고 다른 하나는 그것이 속한 스택 컨텍스트 용 (z-index 속성에 의해 제공됨)입니다.
각 요소가 언제 그려 질지 이해하려면 스택 컨텍스트와이 스택 컨텍스트 (z-index로 정의 됨) 내의 스택 레벨을 알아야합니다. 또한 해당 요소가 스택 컨텍스트를 설정하는지 여부도 알아야합니다. Z- 색인을 설정하면 다음 작업이 수행되기 때문에 이것은 까다로운 부분입니다.
배치 된 상자의 경우 Z- 색인 속성은 다음을 지정합니다.
현재 스택 컨텍스트에서 상자의 스택 레벨입니다.
상자가 스택 컨텍스트를 설정하는지 여부
값의 의미는 다음과 같습니다.
<정수>
이 정수는 현재 스택 컨텍스트에서 생성 된 상자의 스택 레벨입니다. 상자는 또한 새로운 스택 컨텍스트를 설정합니다.
자동
현재 스택 컨텍스트에서 생성 된 상자의 스택 수준은 0입니다. 상자는 루트 요소가 아닌 경우 새 스택 컨텍스트를 설정하지 않습니다.
이제 각 사례를 더 잘 이해할 수있는 모든 정보가 있습니다. 상위 요소에 auto가 아닌 z-index 값이있는 경우 스택 컨텍스트가 생성되므로 하위 요소는 Z-index가 음수 또는 양수이면 내부에 그려집니다. 하위 요소의 Z- 색인은 단순히 상위 요소 내부의 페인팅 순서를 알려줍니다 (두 번째 요점을 다룹니다).
이제 자식 요소에만 양의 Z- 색인이 있고 부모 요소에 아무것도 설정하지 않은 경우 페인팅 순서를 고려하면 자식은 나중에 (단계 (9)), 부모는 단계 (8)에서 페인트됩니다. 위의 부모를 그리는 유일한 논리적 방법은 Z- 색인을 늘리는 것이지만 이렇게하면 부모가 스택 컨텍스트를 설정하고 자식 요소가 여기에 속하게되는 이전 사례에 빠지게됩니다.
양의 Z- 색인을 하위 요소에 설정할 때 상위 요소를 하위 요소 위에 둘 수있는 방법은 없습니다. 또한 z- 색인을 auto와 다른 부모 요소 (양수 또는 음수)로 설정하면 자식 위에 부모를 둘 방법이 없습니다 .1
부모 아래에 자식을 가질 수있는 유일한 경우는 자식 요소에 음의 Z- 인덱스를 설정하고 부모를 Z- 인덱스 : auto로 유지하는 것입니다. 따라서 이것은 스택 컨텍스트를 생성하지 않고 페인팅 순서를 따릅니다. 아이가 먼저 그려집니다.
Z- 색인 외에도 스택 컨텍스트를 만드는 다른 속성이 있습니다. 예상되는 스택 순서에 직면 한 경우 스택 컨텍스트가 생성되었는지 확인하기 위해 해당 속성도 고려해야합니다.
위에서 결론을 내릴 수있는 몇 가지 중요한 사실 :
스택 컨텍스트는 다른 스택 컨텍스트에 포함될 수 있으며 함께 스택 컨텍스트의 계층을 생성합니다.
각 스택 컨텍스트는 형제와 완전히 독립적입니다. 스택이 처리 될 때 하위 요소 만 고려됩니다.
각 스택 컨텍스트는 자체 포함됩니다. 요소의 내용이 스택 된 후 전체 요소가 상위 스택 컨텍스트의 스택 순서로 고려됩니다. 심판
1 : 3D 변환의 사용을 고려하면 몇 가지 해이 한 방법이 있습니다.
Z- 색인이 지정된 경우에도 상위 요소 아래에 요소가있는 예입니다.
.box {
위치 : 상대적;
Z- 색인 : 0;
높이 : 80px;
배경 : 파란색;
변형 스타일 : preserve-3d; /* 이건 중요하다 */
}
.box> div {
여백 : 0 50px;
높이 : 100px;
배경 : 빨간색;
Z- 색인 : -1; / * 이것은 아무것도하지 않습니다 * /
transform : translateZ (-1px); / * 이것은 마법을 할 것입니다* /
}

 

다른 스택 컨텍스트에서 두 요소 사이에 요소를 배치 할 수있는 또 다른 예 :
.box {
위치 : 상대;
Z- 색인 : 0;
높이 : 80px;
배경 : 파란색;
}
.box> div {
여백 : 0 50px;
높이 : 100px;
배경 : 빨간색;
Z- 색인 : 5;
변환 : translateZ (2px);
}
.outside {
높이 : 50px;
배경 : 녹색;
여백 : -10px 40px;
변환 : translateZ (1px);
}
몸 {
변형 스타일 : preserve-3d;
}

 

 
다음과 같이 이상한 스택 순서를 가질 수도 있습니다.
.box {
너비 : 100px;
높이 : 100px;
위치 : 절대;
}
몸 {
변형 스타일 : preserve-3d;
}
 
 
 
 
이러한 해킹을 사용하면 변형 스타일, 원근 및 변형이 position : absolute / fixed 요소에 영향을 미치기 때문에 부작용이있을 수 있습니다. 관련 항목 : 부모의 CSS 필터가 자식 위치 지정을 중단 함
10
|
이에 대해 생각하는 좋은 방법은 각 부모가 고유 한 스택 컨텍스트를 포함한다는 것입니다. 형제 요소는 부모의 스택 순서를 공유하므로 서로 겹칠 수 있습니다.
자식 요소는 항상 부모를 기반으로 스택 컨텍스트를 가져옵니다. 따라서 하위를 상위 (0) 스택 컨텍스트 '뒤로'푸시하려면 음의 Z- 색인 값이 필요합니다.
부모의 컨텍스트에서 요소를 제거하는 유일한 방법은 position : fixed를 사용하는 것입니다. 이는 본질적으로 컨텍스트에 창을 사용하도록 강제하기 때문입니다.
1
|
Mozilla 문서에는
Z- 색인 CSS 속성은 배치 된 요소와 해당 하위 항목 또는 플렉스 항목의 Z 순서를 설정합니다.
다음은 하위 항목과 하위 항목과 관련된 다른 StackOverflow 문서의 추가 논리입니다.
2
|
이 동작을 논리로 어떻게 이해할 수 있습니까?
저에게는 논리로 문제를 이해하기가 어렵습니다. 부모는 자식을 포함합니다. 그릇은 다른 그릇으로 덮을 수 있습니다. 그러나 수프를 그릇에서 꺼내지 않으면 수프를 그릇으로 덮을 수 없습니다.
z- 색인은 겹치는 요소의 순서를 설정합니다. 부모는 자식과 겹칠 수 없습니다.
완벽하게 논리적 인 ImhO.
|
너의 답
StackExchange.ifUsing ( "editor", function () {
StackExchange.using ( "externalEditor", function () {
StackExchange.using ( "snippets", function () {
StackExchange.snippets.init ();
});
});
}, "코드 스 니펫");
StackExchange.ready (function () {
var channelOptions = {
태그 : "".split ( ""),
id : "1"
};
initTagRenderer ( "". split ( ""), "".split ( ""), channelOptions);
StackExchange.using ( "externalEditor", function () {
// 스 니펫이 활성화 된 경우 스 니펫 후에 편집기를 실행해야합니다.
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using ( "snippets", function () {
createEditor ();
});
}
else {
createEditor ();
}
});
function createEditor () {
StackExchange.prepareEditor ({
useStacksEditor : false,
heartbeatType : '답변',
autoActivateHeartbeat : false,
convertImagesToLinks : true,
noModals : true,
showLowRepImageUploadWarning : true,
scoreToPostImages : 10,
bindNavPrevention : true,
접미사 : "",
imageUploader : {
brandingHtml : "Powered by \ u003ca href = \"https : //imgur.com/ \ "\ u003e \ u003csvg class = \"svg-icon \ "width = \"50 \ "height = \"18 \ "viewBox = \ "0 0 50 18 \"fill = \ "none \"xmlns = \ "http : //www.w3.org/2000/svg \"\ u003e \ u003cpath d = \ "M46.1709 9.17788C46.1709 8.26454 46.2665 7.94324 47.1084 7.58816C47.4091 7.46349 47.7169 7.36433 48.0099 7.26993C48.9099 6.97997 49.672 6.73443 49.672 5.93063C49.672 5.22043 48.9832 4.61182 48.1414 4.6931182C47.4335 4.61182 46.7256 4.52515.62644.69359545.2148 4.5251. 43.1481 6.59048V11.9512C43.1481 13.2535 43.6264 13.8962 44.6595 13.8962C45.6924 13.8962 46.1709 13.2535 46.1709 11.9512V9.17788Z \ "/ \ u003e \ u003cpath d = \"M32.492 10.1419C32.492 12.697954 34.104182 14.0484 37.0451 14.0484 41.5985 12.6954 41.5985 10.1419V6.59049C41.5985 5.28821 41.1394 4.66232 40.1061 4.66232C39.0732 4.66232 38.5948 5.28821 38.5948 6.59049V9.60062C38.5948 10.8521 38.2696 11.5455 37.0451 11.5455C35.8209 11.5455 35.4954 10.8 521 35.4954 9.60062V6.59049C35.4954 5.28821 35.0173 4.66232 34.0034 4.66232C32.9703 4.66232 32.492 5.28821 32.492 6.59049V10.1419Z \ "/ \ u003e \ u003cpath fill-rule = \"evenodd \ "clip-rule = \"evenodd \ "d = \ "M25.6622 17.6335C27.8049 17.6335 29.3739 16.9402 30.2537 15.6379C30.8468 14.7755 30.9615 13.5579 30.9615 11.9512V6.59049C30.9615 5.28821 30.4833 4.66231 29.4502 4.66231C28.9913 4.66231 4.66231C28.9913 4.66231 28. .1369 4.56087 21.0134 6.57349 21.0134 9.27932C21.0134 11.9852 23.003 13.913 25.3754 13.913C26.5612 13.913 27.4607 13.4902 28.1109 12.6616C28.1109 12.7229 28.1161 12.779928.121 12.8346C28.1256 12.8854 28.1301 12.9342 28.1301 12.983C28.1301 14.4373 27.2502 15.2321 25.777 15.2321C24.8349 15.2321 24.1352 14.9821 23.5661 14.7787C23.176 14.6393 22.8472 14.52185.0 22.5437 13352429 14.5218 1622.5437 1335. ZM24.1317 9.27932C24.1317 7.94324 24.9928 7.09766 26.1024 7.09766C27.2119 7.09766 28.0918 7.94324 28.0918 9.27932C28.0918 10.6321 27.2311 11.5116 26.1024 11.5116C24.9737 11.5116 24.1317 10.6491 24.1317 9.M93216.Z \ "/ \ u003e \ u0036491 8045 11.9512C16.8045 13.2535 17.2637 13.8962 18.2965 13.8962C19.3298 13.8962 19.8079 13.2535 19.8079 11.9512V8.12928C19.8079 5.82936 18.4879 4.62866 16.4027 4.62866C15.1594 4.62866 14.279 4.982375 13.36093 5.880286678. 7.9466 5.5079C7.58314 4.9328 7.10506 4.66232 6.51203 4.66232C5.47873 4.66232 5.00066 5.28821 5.00066 6.59049V11.9512C5.00066 13.2535 5.47873 13.8962 6.51203 13.8962C7.54479 13.8962 8.0232 13.2535 8.0232 11.9512V8.90741C8.0232 7.58817 8.44431 6.91179 9.53458 6.91179C10.5104 6.91179 10.893 7.58817 10.893 8.94108V11.9512C10.893 13.2535 11.3711 13.8962 12.4044 13.8962C13.4907414.336579911 7.58842.907414.336579911 7.58842.907414.3365799117.58842.907414.336579. 6.91179C16.4027 6.91179 16.8045 7.58817 16.8045 8.94108V11.9512Z \ "/ \ u003e \ u003cpath d = \"M3.31675 6.59049C3.31675 5.28821 2.83866 4.66232 1.82471 4.66232C0.791758 4.66232 0.313354 13.28821 0.313354 6.59049V11.9512758 13.8962 1.82471 13.8962C2.85798 13.8962 3.31675 13.2535 3.31675 11.9512V6.59049Z \ "/ \ u003e \ u003cpath d = \"M1.87209 0.400291C0.843612 0.400291 0 1.1159 0 1.98861C0 2.87869 0.822234 3.57676 1.87209 3.57676C2.90056 3.57676C2.90056 3.57676C2.90056 1.98861C3.7234 1.1159 2.90056 0.400291 1.87209 0.400291Z \ "fill = \"# 1BB76E \ "/ \ u003e \ u003c / svg \ u003e \ u003c / a \ u003e",
contentPolicyHtml : "\ u003ca href = \"https : //stackoverflow.com/help/licensing \ "\ u003ecc by-sa \ u003c / a \ u003e \ u003ca href = \"https://stackoverflow.com에 따라 라이선스가 부여 된 사용자 기여 / legal / content-policy \ "\ u003e (콘텐츠 정책) \ u003c / a \ u003e",
allowUrls : true
},
onDemand : true,
폐기 선택기 : ".discard-answer"
, immediatelyShowMarkdownHelp : true, enableTables : true, enableSnippets : true
});
}
});
Stack Overflow에 대한 답변에 기여해 주셔서 감사합니다!
질문에 반드시 답해주십시오. 세부 사항을 제공하고 연구를 공유하십시오!
그러나 피하십시오…
도움, 설명을 요청하거나 다른 답변에 응답합니다.
의견에 따라 진술하기 참고 자료 또는 개인적인 경험으로 백업하십시오.
자세한 내용은 훌륭한 답변 작성에 대한 팁을 참조하십시오.
초안이 저장되었습니다.
초안이 삭제되었습니다.
가입 또는 로그인
StackExchange.ready (function () {
StackExchange.helpers.onClickDraftSave ( '# login-link');
});
Google을 사용하여 가입
Facebook을 사용하여 가입
이메일 및 비밀번호를 사용하여 가입
제출
게스트로 게시
이름
이메일
필수이지만 표시되지 않음
StackExchange.ready (
함수 () {
StackExchange.openid.initPostLogin ( '. new-post-login', 'https % 3a % 2f % 2fstackoverflow.com % 2fquestions % 2f54897916 % 2fwhy-cant-an-element-with-az-index-value-cover-its- child % 23new-answer ','question_page ');
}
);
게스트로 게시
이름
이메일
필수이지만 표시되지 않음
답변 게시
포기
"답변 게시"를 클릭하면 서비스 약관, 개인 정보 보호 정책 및 쿠키 정책에 동의하게됩니다.
찾고있는 답변이 아닙니까? css css-position z-index 태그가 지정된 다른 질문을 찾아 보거나 직접 질문하십시오.